<template>
    <div class="film subpage" v-if="film">
        <my-head :title="$route.query.name"></my-head>
        <div class="film-box">
            <div class="film-top">
                <img :src="film.poster" class="poster" alt="">
            </div>
        </div>

        <van-button class="checkpiao"  @click="gotofilmcinemas">选座购票</van-button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            film:null,
        }
    },
    methods:{
        gotofilmcinemas(){
            this.$router.push({
                name:'film-cinemas',
                params:{
                    filmId:this.film.filmId 
                },
                query:{
                    name:this.film.name 
                }
            })
        },
        async getFilm(){
            let res = await this.$ajax.getMZdata({
                filmId:this.$route.params.filmId,
            },{
                'X-Host': 'mall.film-ticket.film.info'
            })
            this.film = res.data.film
        }
    },
    mounted(){
        this.getFilm()
    }

}
</script>


<style lang="scss" scoped>
.film{
    padding-bottom: 50px;
    &-box{
        .film-top{
            width:100%;
            height:210px;
            overflow: hidden;
            position: relative;
            .poster{
                width:100%;
                position: absolute;
                left:0;
                top:50%;
                transform: translateY(-50%);
            }
        }
    }
    .checkpiao{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 49px;
        width: 100%;
        text-align: center;
        background-color: #ff5f16;
        color: #fff;
        font-size: 16px;
        line-height: 49px;
    }
}
</style>